<template>
	<div class="survey_list_wrapper">
		<div class="head">
			<el-form :inline="true" :model="listQuery" size="medium">
				<el-form-item><el-input v-model="listQuery.title" placeholder="问卷名称" clearable></el-input></el-form-item>
				<el-form-item>
					<el-select v-model="listQuery.del" placeholder="问卷状态" clearable>
						<el-option label="已发布" value="1"></el-option>
						<el-option label="未发布" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item><el-button type="primary" @click="getSuvrveyListData">查询</el-button></el-form-item>
				<el-form-item><el-button type="primary" @click="handleAddSurvey(true)">添加问卷</el-button></el-form-item>
			</el-form>
		</div>
		<div class="table" v-loading="loading">
			<el-table :data="surveyListData" style="width: 100%">
				<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
				<el-table-column prop="title" label="问卷标题" min-width="300"></el-table-column>
				<el-table-column prop="del" label="问卷状态" min-width="120">
					<template slot-scope="{ row }">
						<el-tag type="success" v-if="row.del === '1'">已发布</el-tag>
						<el-tag type="danger" v-else-if="row.del === '2'">未发布</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="问卷题目" width="110">
					<template slot-scope="{ row }">
						<el-button type="primary" size="small" plain :disabled="row.del === '1'" @click="handleSelectSubject(row)">问卷题目</el-button>
					</template>
				</el-table-column>
				<el-table-column label="调查结果" width="110">
					<template slot-scope="{ row }">
						<el-button type="warning" size="small" @click="handleLookResult(row)">调查结果</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="156">
					<template slot-scope="{ row }">
						<el-dropdown size="small" split-button type="primary" @click="handleCopyHurveyPath(row)" @command="handleCommand">
							复制问卷地址
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-if="row.del === '2'" :command="{ type: 'publish', row }">发布</el-dropdown-item>
								<el-dropdown-item v-if="row.del === '1'" :command="{ type: 'cancel', row }">取消发布</el-dropdown-item>
								<el-dropdown-item :command="{ type: 'edit', row }">修改</el-dropdown-item>
								<el-dropdown-item :command="{ type: 'delete', row }">删除</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page"><Pagination :total="dataCount" @change="getSuvrveyListData" :page.sync="listQuery.page" :limit.sync="listQuery.limit" /></div>
		<select-subject :survey-id="surveyId" v-model="selectDialog"></select-subject>
	</div>
</template>

<script>
import selectSubject from './selectSubject';
import {
	tbQuestionnaireInfoAdd,
	tbQuestionnaireInfoDelete,
	tbQuestionnaireInfoUpdate,
	tbQuestionnaireInfoQuery,
	tbQuestionnaireInfoPublishQuestionnaire,
	tbQuestionnaireInfoQueryQuestionnaireView
} from '@/api/admin/survey/tbQuestionnaireInfo';
export default {
	components: { selectSubject },
	data() {
		return {
			loading: false,
			listQuery: {
				page: 1,
				limit: 10
			},
			surveyId: '',
			dataCount: 0,
			surveyListData: [],
			selectDialog: false
		};
	},
	mounted() {
		this.getSuvrveyListData();
	},
	methods: {
		//获取问卷
		async getSuvrveyListData() {
			let result = await tbQuestionnaireInfoQuery(this.listQuery).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.surveyListData = !result.data ? [] : [...result.data];
			}
		},

		//添加问卷
		handleAddSurvey() {
			this.handleSurveyOperate('添加');
		},

		handleCommand(command) {
			let data = command.row;
			switch (command.type) {
				case 'publish':
					this.updateSurveyDelRequest(data.id, '1');
					break;
				case 'cancel':
					this.updateSurveyDelRequest(data.id, '2');
					break;
				case 'edit':
					this.handleEditSurvey(data);
					break;
				case 'delete':
					this.handleDeleteSurvey(data.id);
					this.break;
			}
		},

		//修改问卷
		handleEditSurvey(data) {
			this.handleSurveyOperate('修改', data);
		},

		//问卷操作
		handleSurveyOperate(title, data) {
			let that = this;
			this.$prompt('请输入问卷名称', '提示', {
				confirmButtonText: title,
				cancelButtonText: '取消',
				closeOnClickModal: false,
				inputValue: !data ? null : data.title,
				inputValidator(value) {
					if (!value) return '问卷名称不能为空';
				},
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						if (!data) {
							await that.addSurveyRequest(instance.inputValue);
						} else {
							await that.updateSurveyRequest(instance.inputValue, data);
						}
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除问卷操作
		handleDeleteSurvey(id) {
			let that = this;
			this.$confirm('此操作将永久删除该问卷, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteSurveyRequest(id);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//添加问卷请求
		async addSurveyRequest(value) {
			let params = { title: value, del: 2, courseId: 999 };
			let result = await tbQuestionnaireInfoAdd(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('问卷添加成功');
				this.getSuvrveyListData();
			}
		},

		//修改问卷请求
		async updateSurveyRequest(value, data) {
			let params = { ...data, title: value };
			let result = await tbQuestionnaireInfoUpdate(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('问卷修改成功');
				this.getSuvrveyListData();
			}
		},

		//删除问卷请求
		async deleteSurveyRequest(id) {
			let result = await tbQuestionnaireInfoDelete(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('问卷删除成功');
				this.getSuvrveyListData();
			}
		},

		//修改问卷状态请求
		async updateSurveyDelRequest(id, del) {
			let params = { id, del, courseId: '999' };
			let result = await tbQuestionnaireInfoPublishQuestionnaire(params).then((res) => res.data);
			if (result.code === '0') {
				if (del === '1') {
					this.$message.success('问卷发布成功');
				} else if (del === '2') {
					this.$message.success('问卷取消发布成功');
				}
				this.getSuvrveyListData();
			} else {
				this.$message.error(result.msg);
			}
		},

		//选择问卷题目
		handleSelectSubject(data) {
			this.selectDialog = true;
			this.surveyId = data.id;
		},

		//查看答题结果
		handleLookResult(row) {
			this.$router.replace({
				path: '/admin/column/survey',
				query: { id: row.id, title: encodeURIComponent(row.title), result: true }
			});
		},

		//复制问卷放入广告中的地址
		async handleCopyHurveyPath(data) {
			let that = this;
			let text = `/#/survey?id=${data.id}`;
			this.$copyText(text).then(
				function () {
					that.$message.success('复制问卷地址成功');
				},
				function () {
					that.$message.error('复制问卷地址失败');
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.survey_list_wrapper {
	.head {
		display: flex;
		justify-content: space-between;
		flex-shrink: 0;
		.el-form-item {
			margin: 0 10px 0 0;
		}
	}
	.table {
		flex: 1;
	}
}
</style>
